<template>
  <div class="alarmCenter_left">
    <div class="boxTitle">
      <img src="@/assets/images/home/rightIcon.png" alt="">
      <span class="title">实时报警</span>
    </div>
    <div class="alarmNew">
      <div class="alarmNum">
        <div class="alarmNum_center">
          <div class="alarmNum_num">67</div>
          <div class="alarmNum_text">新增报警</div>
        </div>
      </div>
    </div>
    <div class="navBar">
      <div class="navItem">
        <span class="item_label">状态：</span>
        <div class="item_content">
          <template v-for="(item, index) in searchBar.list_status">
            <span class="item_text" :class="{ 'item_text_active': index_status == index }"
              @click="changeIndex_status(index)">
              <span>{{ item.name }}</span>
            </span>
          </template>
        </div>
      </div>
      <div class="navItem">
        <span class="item_label">类型：</span>
        <div class="item_content">
          <template v-for="(item, index) in searchBar.list_type">
            <span class="item_text" :class="{ 'item_text_active': index_type == index }"
              @click="changeIndex_type(index)">
              <span>{{ item.name }}</span>
            </span>
          </template>
        </div>
      </div>
      <div class="navItem">
        <span class="item_label">级别：</span>
        <div class="item_content">
          <template v-for="(item, index) in searchBar.list_level">
            <span class="item_text" :class="{ 'item_text_active': index_level == index }"
              @click="changeIndex_level(index)">
              <span>{{ item.name }}</span>
            </span>
          </template>
        </div>
      </div>
    </div>
    <div class="alarmContent">
      <div class="alarmItem" v-for="item in alarmList.list">
        <div class="item_head">
          <div class="item_level">{{ item.level }}</div>
          <span class="item_title">{{ item.title }}</span>
          <span class="item_time">{{ item.time }}</span>
        </div>
        <div class="item_bot">
          <span class="alarmItem_content">{{ item.content }}</span>
          <span class="item_status">{{ item.status }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

let searchBar = reactive({
  list_status: [{ name: '全部', num: null }, { name: '未处理', value: 1 }, { name: '处理中', value: 2 }],
  list_type: [{ name: '全部', num: null }, { name: '垃圾给料', num: 10 }, { name: '焚烧炉系统', num: 20 }, { name: '汽机系统', num: 30 }, { name: '汽机系统', num: 30 }, { name: '汽机系统', num: 30 }, { name: '汽机系统', num: 30 }, { name: '汽机系统', num: 30 }],
  list_level: [{ name: '全部', num: null }, { name: '一般', num: 10 }, { name: '紧急', num: 20 }, { name: '危急', num: 20 }]
})

let alarmList = reactive({
  list: [
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '紧急', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '处理中' },
    { level: '危急', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
    { level: '一般', title: '【设备报警】锅炉系统发生报警', time: '07-16 15:20:09', content: '汽包(GR-QB-001)：上壁壁温温度过高', status: '未处理' },
  ]
})

let index_status = ref(0);//巡检状态选择下标
let index_type = ref(0);//巡检类型选择下标
let index_level = ref(0);//巡检结果选择下标

//改变状态选择
const changeIndex_status = (index: number) => {
  if (index_status.value != index) {
    index_status.value = index;
  }
}

//改变类型选择
const changeIndex_type = (index: number) => {
  if (index_type.value != index) {
    index_type.value = index;
  }
}

//改变级别选择
const changeIndex_level = (index: number) => {
  if (index_level.value != index) {
    index_level.value = index;
  }
}
</script>

<style lang="scss" scoped>
.alarmCenter_left {
  position: absolute;
  z-index: 999;
  background: url(@/assets/images/dailyMaintenance/r-bg-01.png) no-repeat;
  background-size: 100% 100%;
  left: vh(20);
  top: vh(61);
  width: vh(421);
  height: vh(909);
  font-size: vh(14);
  color: #FFFFFF;

  .alarmNew {
    display: flex;
    justify-content: center;
    margin-top: vh(19);

    .alarmNum {
      width: vh(112);
      height: vh(112);
      background: rgba(255, 87, 87, 0.2);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;

      .alarmNum_center {
        width: vh(88);
        height: vh(88);
        background: rgba(255, 87, 87, 0.4);
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .alarmNum_num {
          font-family: DIN;
          font-weight: bold;
          font-size: vh(24);
          color: #FFFFFF;
          line-height: 1;
          margin-bottom: vh(7);
        }

        .alarmNum_text {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(14);
          color: #FFFFFF;
          line-height: 1;
        }
      }
    }
  }

  .navBar {
    padding: 0 vh(16);

    .navItem {
      display: flex;
      font-size: vh(12);
      color: #FFFFFF;
      line-height: vh(30);

      .item_label {
        width: vh(45);
      }

      .item_content {
        flex: 1;

        .item_text {
          margin-right: vh(16);
          display: inline-block;
          line-height: vh(18);
          cursor: pointer;

          &:last-child {
            margin-right: 0;
          }

          &.item_text_active {
            color: #00E4FF;
            border-bottom: 1px solid #00E4FF;

          }
        }
      }

      .item_search {
        display: flex;
        flex: 1;
        align-items: center;

        :deep(.el-input) {
          flex: 1;
          margin-right: vh(20);
          height: vh(18);

          .el-input__wrapper {
            background-color: rgba(11, 122, 155, 0.5);
            box-shadow: none;
            border: vh(1) solid #00BDE5;
            border-radius: vh(3);

            .el-input__inner {
              color: #fff;
              font-size: vh(11);
              line-height: vh(22);
              height: vh(22);
            }
          }
        }

        .btn {
          width: vh(68);
          height: vh(25);
          display: inline-block;
          line-height: vh(25);
          border: 1px solid #00AABE;
          border-radius: vh(4);
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(12);
          color: #FFFFFF;
          text-align: center;
          background: #00AABE;
          cursor: pointer;
        }
      }
    }
  }

  .alarmContent {
    padding: 0 vh(16);
    line-height: 1;
    height: vh(630);
    overflow-y: scroll;

    .alarmItem {
      padding-top: vh(14);
      padding-bottom: vh(13);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      .item_head {
        line-height: vh(18);
        display: flex;

        .item_level {
          width: vh(37);
          height: vh(18);
          background: rgba(0, 192, 255, 0.2);
          border-radius: vh(4);
          border: 1px solid #00C0FF;
          text-align: center;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(12);
          color: #00D8FF;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: vh(10);
        }

        .item_title {
          flex: 1;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: vh(14);
          color: #FFFFFF;
        }

        .item_time {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(12);
          color: #DDDDDD;
        }
      }

      .item_bot {
        display: flex;
        padding-left: vh(52);
        margin-top: vh(11);
        line-height: 1;

        .alarmItem_content {
          flex: 1;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(11);
          color: #8FB1B7;
        }

        .item_status {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: vh(12);
          color: #FFC000;
        }
      }
    }
  }
}
</style>
